01
02
03
04
05
프로젝트
개요
및
팀
구성
UI/UX
설계
UI/UX
디자인
구현
및
개발
프로젝트
수행
결과
01.
프로젝트
개요
및
팀
구성
1-
1
프로젝트
개요
01.
프로젝트
개요
및
팀
구성
꿀스테이
:
숙박
예약
어플
1-
1
프로젝트
개요
01.
프로젝트
개요
및
팀
구성
꿀스테이의
강점
01.
프로젝트
개요
및
팀
구성
1-
1
프로젝트
개요
홍보
내용
축소
부족한
내용
정보
전달
부족
비효율적인
반응형
웹서비스
트렌드에
뒤쳐진
UI
심미성
꿀스테이의
약점
홍보
부족으로
낮은
인지도
현업
이슈
-
2022
년
국내
온라인
숙박어플
‘
여기어때
’
,
‘
야놀자
’
등
경쟁
업체에
비해
낮은
선호도
-
후발주자로
시작하여
플랫폼
내
숙소의
다양성
부족
-
트렌드를
반영하지
못한
UI
로
타
경쟁사에
비해
신뢰성과
홍보성이
떨어짐
-
홍보
내용을
매우
축약
시켜
놓아서
꿀스테이에
대한
홍보성이
빈약함
문제
문제
1 :
파트너센터는
영업
용도로
기획을
하였으나
기획
의도를
벗어나고
있음
문제
2 :
파트너센터는
다양한
디바이스나
해상도에
따른
효율적인
웹
서비스가
제공되고
있지
않음
문제
3 :
파트너센터는
홍보
내용이
빈약함
문제
4 :
파트너센터는
UI
의
심미성이
트렌드에
뒤처져
있음
프로젝트
주제
알림톡을
활용한
꿀스테이
파트너센터
랜딩페이지
제작
1-
2
현업이슈
및
문제
01.
프로젝트
개요
및
팀
구성
1-
3
주제
및
기획의도
꿀스테이
파트너센터
랜딩페이지
제작
-
랜딩페이지
클릭
수에
따른
노출
효과로
홍보
효과
극대화
01.
프로젝트
개요
및
팀
구성
랜딩페이지
제작의
필요성
-
다양한
전략이
나오는
시점에서
급부상하고
있는
마케팅
전략
-
랜딩페이지를
활용한
마케팅은
영업
기회를
창출
-
클릭을
유도하여
방문자가
구매나
구독을
하도록
장려
다양한
채널에서
홍보할
수
있는
강력한
마케팅
전략
1-
4
활용방안
및
기대효과
01.
프로젝트
개요
및
팀
구성
01.
프로젝트
개요
및
팀
구성
1-
6
프로젝트
기술서
Project
주제
알림톡을
활용한
꿀스테이
파트너센터
랜딩페이지
제작
팀명
도와조
Project
선정
배경
현업에서
기대하는
것은
무엇인가
?
업주에게
꿀스테이에
대한
적극
홍보로
브랜드
선호도
상승과
상담
예약
시스템으로
업주들의
편의성을
높임
구체적으로
해결하고자
하는
것은
무엇인가
?
(Project Output Image)
-
다양한
디바이스
및
해상도에
효율적으로
서비스
될
수
있는
반응형
웹
구현
-
사용자의
니즈
및
최신
트렌드를
반영한
UI
로
디자인
-
업주
입장에서
봤을
때의
꿀스테이의
장점을
상세하게
설명하고
,
적극적으로
홍보
-
효율적이고
편리한
상담
예약을
위한
알림톡
구현
프로젝트
수행을
위해
더
알아야
하는
것은
무엇인가
?
[
업주의
니즈
파악
]
-
업주
입장에서
꿀스테이를
사용했을
시
돌아오는
장점을
명확하게
파악하고
홍보
[
알림톡
기술
구현
]
-
알림톡을
활용하여
상담
예약
확인
기능
구현
[
랜딩페이지
기능
구현
]
-
최신
트렌드에
맞는
랜딩페이지의
디자인과
기능을
구현
1-
7
벤치마킹
01.
프로젝트
개요
및
팀
구성
KREAM
ZIGZAG
1-
8
프로토타입
01.
프로젝트
개요
및
팀
구성
1-
9
팀
구성
및
역할
01.
프로젝트
개요
및
팀
구성
1-
10
개발언어
및
툴
01.
프로젝트
개요
및
팀
구성
1-
11
개발
기간
및
개발
일정
01.
프로젝트
개요
및
팀
구성
02. UI/UX
설계
2-
1
워크플로우
02. UI/UX
설계
2-
2
중단점
설계
02. UI/UX
설계
768px
428px
1024px
2-
3
와이어프레임
02. UI/UX
설계
PC
2-
3
와이어프레임
02. UI/UX
설계
Tablet
Mobil
e
2-
4
스토리
보드
02. UI/UX
설계
1
2
3
1
2
3
텍스트
서서히
나타나는
효과
버튼
클릭시
상담예약창으로
바로
이동
텍스트
/
이미지
서서히
나타나는
효과
1
2-
4
스토리
보드
02. UI/UX
설계
4
텍스트
서서히
나타나는
효과
4
5
5
마우스
hover
시
카드
플립
효과
6
6
정보
입력시
상담
예약
알림톡
발송
2-
5
스타일
가이드
02. UI/UX
설계
03. UI/UX
디자인
3-1 UI
디자인
03. UI/UX
디자인
PC ve
r.
3-1 UI
디자인
03. UI/UX
디자인
PC ve
r.
3-1 UI
디자인
03. UI/UX
디자인
PC ve
r.
3-1 UI
디자인
03. UI/UX
디자인
Tablet ver.
3-1 UI
디자인
03. UI/UX
디자인
Tablet ver.
3-1 UI
디자인
03. UI/UX
디자인
Mobile
ver.
3-1 UI
디자인
03. UI/UX
디자인
Mobile
ver.
03. UI/UX
디자인
3-1 UI
디자인
04.
구현
및
개발
4-
1
반응형
웹
구현
04.
구현
및
개발
PC ve
r. 1
024
px
4-
1
반응형
웹
구현
04.
구현
및
개발
Tablet
Mobile
4-
2
동적
기능
구현
04.
구현
및
개발
1) Fade
-
up
효과
(<div>
)
4-
2
동적
기능
구현
04.
구현
및
개발
2)
슬라이드
효과
(PC
ver
.)
4-
2
동적
기능
구현
04.
구현
및
개발
카드
애니메이션
효과
(
마우스
hover
)
4-3 API
기능
구현
04.
구현
및
개발
①
알림톡
구현을
위한
솔라피
api
호출
②
입력
폼을
작성하고
클릭
③
btn_sendMe
ssage
()
함수
호출
-
입력
폼에
있던
정보를
변수에
저장
sendMe
ssage
함수에
파라미터로
넣어
전송
카카오
알림톡
구현
4-3 API
기능
구현
04.
구현
및
개발
④
파라미터로
받은
정보를
Json
형태로
변환하여
알림톡
전송
요청
05.
프로젝트
수행
결과
05.
프로젝트
수행
결과
5-
1
구현
영상
https:/
/
www.youtube.com
/
watch?v
=
hT
MxKFvg
RQw
05.
프로젝트
수행
결과
5-
2
구현
홈페이지
http:/
/jin13181.
ivyro.net/
coolstay
Thank you
감사합니다